<template>
    <div class="content banner-box">
        <div class="left-box">
            <div class="title-box">
                产品系列
            </div>
            <div class="item-box">
                <div class="item" v-for="(item, index) in MaxData" :key="index" @click="checViewData(index)">
                    {{ item.title }}
                </div>
            </div>
        </div>
        <div class="right">
            <div class="item-box" v-for="(item, index) in ViewData" :key="index" @click="gotoChanpin(item.id)">
                <div class="img">
                    <img v-if="item.img[0]" :src="base64Img(item.img[0])" alt="">
                </div>
                <div class="title">
                    {{ item.title }}
                </div>
                <div class="title2">
                    {{ item.xinghao }}
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { getLeftList } from '@/api/viewapi.js'
import { useRoute } from 'vue-router';
import { base64Img } from '@/tools/tools.js'
import router from '@/router/index.js'
const MaxData = ref([])
const ViewData = ref([])
const TopId = ref(0)
const route = useRoute();




const checViewData = (index) => {
    ViewData.value = MaxData.value[index].chanpin
    console.log(MaxData.value[index].chanpin);
}

const _getLeftList = () => {
    getLeftList().then((res) => {
        MaxData.value = res.data.data
        console.log('全部产品', res.data.data);
        checkIndexCheck()
    })
}

// 主动筛选
const checkIndexCheck = () => {
    let data = MaxData.value
    for (let index = 0; index < data.length; index++) {
        if (TopId.value == data[index].record_id) {
            ViewData.value = data[index].chanpin;
            console.log(ViewData.value);
        }
    }
}
// 主动筛选2 
const checkIndexCheck2 = (id) => {
    let data = MaxData.value
    for (let index = 0; index < data.length; index++) {
        if (id == data[index].record_id) {
            ViewData.value = data[index].chanpin;
            console.log(ViewData.value);
        }
    }
}

// 跳转产品
const gotoChanpin = (id) => {
    router.push({ path: '/chanpincontent', query: { id: id } })
}


watch(
    () => route.query,  // 监听 query 参数
    (newQuery, oldQuery) => {
        console.log('query 参数变化:', oldQuery, '->', newQuery)
        // 在 query 参数变化时执行的代码

        checkIndexCheck2(newQuery.id)
    },
    { deep: true }  // 使用 deep 选项来深度监听 query 对象
)

onMounted(() => {
    TopId.value = route.query.id
    _getLeftList()
})
</script>
<style lang="scss" scoped>
// 取消显示手机端 显示pc端
@media (min-width: 800px) {
    .content {
        display: flex;
        padding-top: 20px;
        padding-bottom: 20px;
        justify-content: space-between;

        .left-box {
            width: 260px;

            .title-box {
                text-align: center;
                font-size: 26px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                padding: 20px;
                line-height: 40px;
                color: white;
                background-color: rgb(0, 160, 233);
                font-weight: 800;
            }

            .item-box {
                .item {
                    padding: 20px;
                    cursor: pointer;
                    font-weight: 800;
                    background-color: rgb(245, 248, 250);
                    border-bottom: 1px solid gainsboro;
                }

                .item:hover {
                    background-color: rgb(80, 88, 95);
                    color: rgb(248, 248, 248);
                }
            }
        }

        .right {
            padding: 10px;
            margin-left: 20px;
            background-color: rgb(245, 248, 250);
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            min-height: 100px;

            .item-box {
                padding: 20px;
                background-color: white;
                cursor: pointer;
                height: 300px;

                .img {
                    img {
                        width: 320px;
                        height: 260px;
                    }
                }

                .title {
                    font-size: 18px;
                    text-align: center;

                }

                .title2 {
                    font-size: 14px;
                    text-align: center;
                    margin-top: 4px;
                }
            }
        }
    }
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {

    .content {
        .left-box {
            display: none;
        }

        .right {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
            margin-bottom: 10px;

            .item-box {
                background-color: #00a0e9;

                .img {
                    margin: 0;
                    padding: 0;

                    img {
                        width: 100%;
                        height: 200px;
                    }
                }

                .title {
                    text-align: center;
                    color: white;
                    padding: 10px 0;
                }
                .title2 {
                    text-align: center;
                    color: white;
                    padding: 10px 0;
                }
            }
        }
    }
}
</style>